<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市区三级联动菜单</title>
    <script src="./01.js"></script>
</head>
<body>
    <select id="province" onchange="fetchCities()">
        <option value="">请选择省</option>
    </select>
    <select id="city" onchange="fetchDistricts()" disabled>
        <option value="">请选择市</option>
    </select>
    <select id="district" disabled>
        <option value="">请选择区</option>
    </select>

    <script>
        // 初始化省下拉框
        function initProvinces() {
            const provinceSelect = document.getElementById('province');
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.code;
                option.textContent = item.value;
                provinceSelect.appendChild(option);
            });
        }

        // 获取市
        function fetchCities() {
            const provinceCode = document.getElementById('province').value; 
            const citySelect = document.getElementById('city');
            const districtSelect = document.getElementById('district');

            // 清空市和区
            citySelect.innerHTML = '<option value="">请选择市</option>';
            districtSelect.innerHTML = '<option value="">请选择区</option>';
            citySelect.disabled = true;
            districtSelect.disabled = true;

            if (!provinceCode) return;

            const province = data.find(item => item.code === provinceCode);
            if (province && province.children) {
                province.children.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city.code;
                    option.textContent = city.value;
                    citySelect.appendChild(option);
                });
                citySelect.disabled = false;
            }
        }

        // 获取区
        function fetchDistricts() {
            const cityCode = document.getElementById('city').value;
            const districtSelect = document.getElementById('district');

            // 清空区
            districtSelect.innerHTML = '<option value="">请选择区</option>';
            districtSelect.disabled = true;

            if (!cityCode) return;

            const province = data.find(item => item.children && item.children.some(city => city.code === cityCode));
            const city = province.children.find(city => city.code === cityCode);

            if (city && city.children) {
                city.children.forEach(district => {
                    const option = document.createElement('option');
                    option.value = district.code;
                    option.textContent = district.value;
                    districtSelect.appendChild(option);
                });
                districtSelect.disabled = false;
            }
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', initProvinces);
    </script>
</body>
</html>
